<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <view class="headerTitle">
        打个卡
      </view>
      <view class="userName">
        Hi，{{userInfo.nickName}}
      </view>
      <view class="date">
        2024年8月22日 星期四
      </view>
    </view>

    <view class="clockType">
      <view class="typeTitle">
        <uni-icons type="calendar" size="15" color="#999"></uni-icons>
        <view class="title">
          打卡方式
        </view>
      </view>
      <view class="typeValue">
        <view class="value">
          定位打卡
        </view>
        <uni-icons type="right" size="15" color="#999"></uni-icons>
      </view>
    </view>

    <map class="box" id='myMap' :latitude="latitude" :longitude="longitude" :markers='covers'>
      <!-- <view class="control">
        <uni-icons type='location-filled' size="30" color="red"></uni-icons>
      </view> -->
    </map>

    <view class="btn-box">
      <view class="btn" @click="clockOn()">
        打卡
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        wh: 0,
        taskId: '',
        branchId: 0,
        covers: [{
            id: 1,
            latitude: 27.11,
            longitude: 115.03,
            width: 20,
            height: 30,
          },
          {
            id: 2,
            latitude: 27,
            longitude: 115,
            iconPath: '/static/weizhi.png',
            width: 30,
            height: 30,
          }
        ],
        type: 0,
        latitude: 27.113943,
        longitude: 115.038723,
        mapCtx: null,
      };
    },
    onLoad(options) {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight - 160
      this.taskId = options.taskId
      this.branchId = options.branchId
      this.type = options.type
      const that = this
      this.getData();
      setTimeout(function() {
        this.mapCtx = uni.createMapContext('myMap', this);
        this.drawCircle();
      }, 200);
      // uni.getSetting({
      //   success(res) {
      //     // 判断是否拥有此权限进行拉起授权  和 重新授权功能
      //     if (!res.authSetting['scope.userFuzzyLocation']) {
      //       // 未授权此项权限 拉起授界面
      //       uni.authorize({
      //         scope: 'scope.userFuzzyLocation',
      //         success() {
      //           // 授权成功后 就可以执行 需要权限的  操作函数了
      //           // 使用已授权的功能
      //           uni.showToast({
      //             title: '授权成功',
      //             icon: 'success'
      //           });
      //           uni.getFuzzyLocation({
      //             success: function(res) {
      //               that.longitude = res.longitude
      //               that.latitude = res.latitude
      //               console.log(res);
      //             },
      //           });
      //         },
      //         fail(err) {
      //           /*
      //            第一次拒绝授权后必须在 uni.authorize的fail中使用
      //            uni.openSetting 才能进入设置界面打开授权按钮
      //            */
      //           uni.$showMsg('拒绝授权')
      //           // 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
      //           uni.showModal({
      //             title: '是否重新授权获取位置信息功能',
      //             success(res) {
      //               if (res.confirm) {
      //                 uni.openSetting({
      //                   success() {
      //                     console.log('开启权限成功');
      //                   },
      //                   fail() {
      //                     console.log('开启权限失败');
      //                   }
      //                 });
      //               } else if (res.cancel) {
      //                 console.log('拒绝开启开启权限');
      //               }
      //             }
      //           });
      //         }
      //       });
      //     } else {
      //       uni.getFuzzyLocation({
      //         success: function(res) {
      //           that.longitude = res.longitude
      //           that.latitude = res.latitude
      //           console.log(res);
      //         },
      //       });
      //     }
      //   }
      // });
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getData() {
        if (this.branchId) {
          const {
            data: data
          } = await uni.$http.get(`/users/map/maintaskId/${this.branchId}`);
        } else {
          const {
            data: data
          } = await uni.$http.get(`/users/map/maintaskId/${this.taskId}`);
          this.latitude = this.covers[0].latitude = data.data.latitude;
          this.longitude = this.covers[0].longitude = data.data.longitude;
          this.covers[1].latitude = data.data.latitude - 0.001;
          this.covers[1].longitude = data.data.longitude - 0.001;
        }
      },
      drawCircle() {
        this.mapCtx.drawCircle({
          latitude: 23.099994, // 圆心纬度  
          longitude: 113.324520, // 圆心经度  
          radius: 50000, // 半径，单位：米  
          strokeColor: '#FF0000DD', // 描边的颜色，'#RRGGBBAA'格式  
          fillColor: '#1AAD19DD', // 填充的颜色，'#RRGGBBAA'格式  
          strokeWidth: 2, // 描边的宽度  
          // 其他参数...  
          success: (res) => {
            console.log('圆形绘制成功', res);
          },
          fail: (err) => {
            console.error('圆形绘制失败', err);
          }
        });
      },
      async clockOn() {
        if (this.type == 1) {
          await uni.$http.post(`/users/tasks/maintaskmap/sign?studentId=${this.userInfo.studentId}`, {
            taskId: this.taskId,
            latitude: this.latitude,
            longitude: this.longitude
          })
        } else if (this.type == 2) {
          await uni.$http.post(`/users/tasks/branchtaskmap/sign?studentId=${this.userInfo.studentId}`, {
            taskId: this.taskId,
            branchTaskId: this.branchId,
            latitude: this.latitude,
            longitude: this.longitude
          })
        }
        uni.$showMsg('打卡成功!')
        setTimeout(() => {
          this.back()
        }, 1500)
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  .box {
    position: relative;
    width: 100%;
    height: 600rpx;

    .control {
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }

  .header {
    height: 340rpx;
    padding: 60rpx 30rpx;
    background-color: #b6edaa;
    box-sizing: border-box;

    .back {
      position: absolute;
      top: 65rpx;
      left: 21rpx;
    }

    .headerTitle {
      text-align: center;
      color: #fff;
    }

    .userName {
      margin-top: 50rpx;
      color: #fff;
      font-weight: 700;
    }

    .date {
      margin-top: 20rpx;
      color: #eee;
      font-size: 26rpx;
    }
  }


  .videoBox {
    width: 100%;

    video {
      width: 100%;
    }
  }

  .clockType {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -40rpx;
    padding: 0 20rpx;
    height: 100rpx;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;

    .typeTitle {
      display: flex;
      align-items: center;

      .title {
        margin-left: 10rpx;
        font-size: 30rpx;
        color: #999;
      }
    }

    .typeValue {
      display: flex;

      .value {
        font-size: 30rpx;
        color: #999;
      }
    }
  }

  .btn-box {
    position: relative;
    top: 130rpx;
    left: 220rpx;
    width: 310rpx;
    height: 310rpx;
    border: 8rpx solid #c4eebe;
    border-radius: 50%;

    .btn {
      width: 280rpx;
      height: 280rpx;
      margin: 15rpx auto;
      border-radius: 50%;
      background-color: #b6edaa;
      text-align: center;
      line-height: 280rpx;
      font-size: 50rpx;
      color: #fff;
    }
  }
</style>